<!DOCTYPE html5>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
<style>

    .music2_type2{
        position: relative;
        left: 15%;
        top: 3%;
        width: 200px;
        height: 500px;
    }

    .music2_type2 button{
        width: 200px;
        height: 40px;
        float: left;
        text-align: center;
    }

    .music2_type2_1{
        font-size: 20px;
        font-weight: bold;
    }
    .music2_type2_img{
       position: relative;
       top: 14%;
    }
    .music2_first{
        color: #36bee0;
    }
    .music2_content{
      position: relative;
      top: -60%;
      left: 30%;
      width: 56%;
      height: 61%;

    }
    .MV{
      position: relative;
      top: -100%;
      float: left;
    }
    #list-2{
      display: none;
    }
</style>
</head>
<body>


<!-- 头部 -->
<div class="head">
    <div class="head_top">
      <h1 ><a href="#"><img src="picture/thumbnail_large.webp" alt="" class="logo"></a></h1>
      
      <div class="head_search">
  <form action="">
        <input type="text" class="sear_input" placeholder="搜索音乐、MV、歌单、用户">
        
        <button  type="button"   class="button1">
        <img src="picture\R-C.png" alt="">
        </button>
      
  </form>


      </div>
      

<div>
      <ul class="top_list">
        <li class="first-0"><a href="#">音乐馆</a></li>
        <li class=""><a href="music1.html">我的音乐</a></li>
        <li><a href="HTML项目 wty\vip.html">VIP</a></li>
      </ul>

        <div class="boundary">
        </div>

      <div class="head_right">
        <a href="#" class="land">登录</a>
      </div>
</div>


</div>
      <ul class="subnav">
        <li ><a href="music.html" >首页</a></li>
        <li ><a href="HTML项目 wty\singer.html">歌手</a></li>
        <li class="first-1"><a href="music2.html">电台</a></li>
        <li><a href="HTML项目slh\mv.html">MV</a></li> 
      </ul>
    
</div>



</div>
</div>
  <!-- 头部 -->

  <div id="list-1">
    <div class="music2_type2" >
        
        <button  class="music2_type2_1"><img src="picture\icon_classification.png" alt="" class="music2_type2_img">分类</button>
        <button   onclick="list1()" class="music2_first">全部</button>
        <button  onclick="list2()">DJ</button>
        <button >语言</button>
        <button >主题</button>
        <button >心情</button>
        <button >场景</button>
        <button >风格</button>
    
    </div>
    

    <!-- 目录 -->
    
          <div class="music2_content" >
          <div class="MV">
          <a href="#"><img src="picture/d1.png" class="imag1"></a>
          <h2 class="movie_list_title">猜你喜欢 </h2>
          </div>
    
          <div class="MV">
            <a href="#"><img src="picture/d2.png" class="imag1"></a>
            <h2 class="movie_list_title">随心听 </h2>
          </div>
    
          <div class="MV">
              <a href="#"><img src="picture/d3.png" class="imag1"></a>
              <h2 class="movie_list_title">抖音神曲 </h2>
          </div>
    
          <div class="MV">
                <a href="#"><img src="picture/d4.png" class="imag1"></a>
                <h2 class="movie_list_title">深度睡眠 </h2>
          </div>
          <div class="MV">
            <a href="#"><img src="picture/d5.png" class="imag1"></a>
            <h2 class="movie_list_title">情感治愈站 </h2>
          </div>
          <div class="MV">
            <a href="#"><img src="picture/d6.png" class="imag1"></a>
            <h2 class="movie_list_title">KTV必点歌 </h2>
           </div>
          <div class="MV">
            <a href="#"><img src="picture/d7.png" class="imag1"></a>
            <h2 class="movie_list_title">经典 </h2>
          </div>
          <div class="MV">
            <a href="#"><img src="picture/d8.png" class="imag1"></a>
            <h2 class="movie_list_title">网络流行 </h2>
          </div>
        </div>
    
    </div>
    






  <!-- 目录 -->
<div id="list-2">
<div class="music2_type2" >
    
    <button  class="music2_type2_1"><img src="picture\icon_classification.png" alt="" class="music2_type2_img">分类</button>
    <button   onclick="list1()">全部</button>
    <button onclick="list2()" class="music2_first">DJ</button>
    <button >语言</button>
    <button >主题</button>
    <button >心情</button>
    <button >场景</button>
    <button >风格</button>

</div>

<!-- 目录 -->

      <div class="music2_content" >
      <div class="MV">
      <a href="#"><img src="picture/e1.png" class="imag1"></a>
      <h2 class="movie_list_title">B榜热单 </h2>
      </div>

      <div class="MV">
        <a href="#"><img src="picture/e2.png" class="imag1"></a>
        <h2 class="movie_list_title">影视原声 </h2>
      </div>

      <div class="MV">
          <a href="#"><img src="picture/e3.png" class="imag1"></a>
          <h2 class="movie_list_title">车载 </h2>
      </div>

      <div class="MV">
            <a href="#"><img src="picture/e4.png" class="imag1"></a>
            <h2 class="movie_list_title">助眠白噪音 </h2>
      </div>
      <div class="MV">
        <a href="#"><img src="picture/e5.png" class="imag1"></a>
        <h2 class="movie_list_title">热歌 </h2>
      </div>

    </div>

</div>













    <script >

      function list1(){
          document.getElementById('list-1').style.display='block';
          document.getElementById('list-2').style.display='none';
      }
      
      function list2(){
          document.getElementById('list-1').style.display='none';
          document.getElementById('list-2').style.display='block';
      }
      
      </script>



  <!--底部-->
  <div class="foot">
    <div class="copyright">
      <p>
        <a href="#">AboutUS</a> |
        <a href="#">服务条款</a> |
        <a href="#">用户服务协议</a> |
        <a href="#">隐私政策</a> |
        <a href="#">权利声明</a> |
        <a href="#">客服中心</a> |
        <a href="#">网站导航</a>
      </p>
    </div>
  </div>
  <!-- 底部 -->